<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        /* 
          如果希望偏移量启动,需要开始元素的绝对定位
        */
        position: absolute;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        /* 
          使div可以跟随鼠标移动
        */
        //获取box1
        var box1 = document.getElementById('box1');
        //绑定鼠标移动事件
        document.onmousemove = function (event) {
          //解决兼容问题
          event = event || window.event;

          //获取到鼠标的坐标
          /* 
            clientX和clientY
              - 用于获取鼠标在当前的可见窗口的坐标
                div的偏移量,是相对于整个页面

            pageX和pageY可以获取鼠标相对于当前页面的坐标
              但是这两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用
          */
          var left = event.pageX;
          var top = event.pageY;

          //设置div的偏移量
          box1.style.left = left + 'px';
          box1.style.top = top + 'px';
        };
      };
    </script>
  </head>
  <body style="height: 1000px">
    <div id="box1"></div>
  </body>
</html>
